<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变更记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/public-students.css">
    <script src="../common/jquery-1.10.2.min.js"></script>
    <script src="../common/common.js"></script>
</head>
<body style="background: #fff">
<div class="biangeng-box">
    <div class="biangeng-box-tab">
        <ul class="biangeng-box-tab-ul">
            <li>
                <div>班级</div>
            </li>
            <li>
                <div>宿舍</div>
            </li>
            <li>
                <div>
                    物资领取
                </div>
            </li>
        </ul>
    </div>
    <div class="chl">
        <!--效果1-->
        <div class="biangeng-body-one " >
            <div class="biangeng-body-jilu">
                <div>记录</div>
                <div class="biangeng-body-el">
                    <div style="position: relative">
                        <em class="icon-style"></em>
                        <span class="biangeng-body-el-text">进入班级A</span>
                        <span class="biangeng-body-el-t">2018-03-04</span>
                        <span class="biangeng-body-pt"></span>
                    </div>
                </div>
                <div class="biangeng-body-el">
                    <div style="position: relative">
                        <em class="icon-style"></em>
                        <span class="biangeng-body-el-text">进入班级A,转入班级B</span>
                        <span class="biangeng-body-el-t">2018-03-04</span>
                        <span class="biangeng-body-pt"></span>
                    </div>
                </div>
                <div class="biangeng-body-el">
                    <div style="position: relative">
                        <em class="icon-style"></em>
                        <span class="biangeng-body-el-text">转出班级B,转入班级C</span>
                        <span class="biangeng-body-el-t">2018-03-04</span>
                        <span class="biangeng-body-pt"></span>
                    </div>
                </div>
                <div class="biangeng-body-el">
                    <div style="position: relative">
                        <em class="icon-style"></em>
                        <span class="biangeng-body-el-text">报名班级D</span>
                        <span class="biangeng-body-el-t">2018-03-04</span>
                        <!--<span class="biangeng-body-pt"></span>-->
                    </div>
                </div>
            </div>
        </div>
        <!--效果1-->
        <!--效果2-->
        <div class="biangeng-body-one" >
            <div class="biangeng-body-jilu">
                <div>记录</div>
                <div class="biangeng-body-el">
                    <div style="position: relative">
                        <em class="icon-style"></em>
                        <span class="biangeng-body-el-text">进入班级D</span>
                        <span class="biangeng-body-el-t">2018-03-04</span>
                        <span class="biangeng-body-pt"></span>
                    </div>
                </div>
                <div class="biangeng-body-el">
                    <div style="position: relative">
                        <em class="icon-style"></em>
                        <span class="biangeng-body-el-text">进入班级D,转入班级C</span>
                        <span class="biangeng-body-el-t">2018-03-04</span>
                        <span class="biangeng-body-pt"></span>
                    </div>
                </div>
                <div class="biangeng-body-el">
                    <div style="position: relative">
                        <em class="icon-style"></em>
                        <span class="biangeng-body-el-text">转出班级C,转入班级E</span>
                        <span class="biangeng-body-el-t">2018-03-04</span>
                        <span class="biangeng-body-pt"></span>
                    </div>
                </div>
                <div class="biangeng-body-el">
                    <div style="position: relative">
                        <em class="icon-style"></em>
                        <span class="biangeng-body-el-text">报名班级F</span>
                        <span class="biangeng-body-el-t">2018-03-04</span>
                        <!--<span class="biangeng-body-pt"></span>-->
                    </div>
                </div>
            </div>
        </div>
        <!--效果2-->
        <!--效果3-->
        <div class="biangeng-body-thr">
            <div class="biangeng-body-thr-one">
                <span>总计：</span>
                <span class="biangeng-body-col">2</span>
                <span class="biangeng-body-thr-pl">费用：</span>
                <span class="biangeng-body-col">308</span>
            </div>
            <div class="biangeng-body-thr-two">
                <div>
                    <span class="pt">2018-09-02</span>
                    <span class="right-el pt">费用：100</span>
                </div>
                <div style="margin-top: 0.2rem">
                    <span class="right-tl">物资名称(15465665)</span>
                    <span class="right-el right-tl">数量1</span>
                </div>
            </div>
            <div class="biangeng-body-thr-two">
                <div>
                    <span class="pt">2018-09-02</span>
                    <span class="right-el pt">费用：100</span>
                </div>
                <div style="margin-top: 0.2rem">
                    <span class="right-tl">物资名称(15465665)</span>
                    <span class="right-el right-tl">数量1</span>
                </div>
            </div>
        </div>
        <!--效果3-->

    </div>

</div>
<script>
    $('.biangeng-box-tab-ul li').eq(0).find('div').addClass('sy-cul');
    $('.biangeng-box-tab-ul li').eq(0).find('div').addClass('sy-text');


    if($(".biangeng-box-tab-ul li").eq(0).index() == 0){
        // $('.chl').eq(0).find('div').eq(0).addClass('bl');
    }
    $(function(){

        $('body').on('click','.biangeng-box-tab-ul li',function(){
            console.log($(".biangeng-box-tab-ul li").index(this))
            if($(".biangeng-box-tab-ul li").index(this) == 1){

            }
            $(this).find('div').addClass('sy-cul').parents('li').siblings().find('div').removeClass('sy-cul');
            $(this).find('div').addClass('sy-text').parents('li').siblings().find('div').removeClass('sy-text');
        });
    })
</script>
</body>
</html>
